<template>
  <card-component :content-title="contentTitle"
                  :page="page"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"></table-component>

  </card-component>

</template>


<script>
  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    data() {
      return {
        chanxian: '',
        contentTitle: this.$getTextByLangKey('程序列表'),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },
      }
    },
    created: function () {

      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {
        this.tableHeader =  []
        this.tableData = []

        this.chanxian = this.$route.query.chanxian
        this.contentTitle = this.chanxian + this.$getTextByLangKey('程序列表')
        this.requestProgramFileList()

      },

//      autoRequest: function () {
//
//        function fun(context) {
//
//          var currentUrl = context.$route.path
//          //判断当前的路由，如果是/program，则可以继续请求，否则不做请求
//          if (currentUrl === '/programlist') {
////            console.log('--请求数据--programContent'+context.chanxian)
////            Request.requestProgramListAuto(context,context.chanxian,context.page.currentPage,20)
//          } else {
////            MyUtil.programAutoCount = 0
//          }
//        }
//
////        MyUtil.timeoutDo(this,fun)
//
//      },

      requestProgramFileList() {
        request.requestProgramList(this.chanxian, this.page.currentPage, 20, res => {
          let list = res.data.data.list
          let header = res.data.data.header
          let programHeader = [{type: 'index', isShow: true, width: '65', label: 'NO.'},]
          let programList = []
          header.forEach(item => {
            if (item.prop === 'programName') {
              item.isShow = true
              item.width = 250
              item.type = 'link'
            } else if (item.prop === 'path') {
              item.isShow = true
            }
            programHeader.push(item)
          })


          list.forEach(item => {
            item.isShowHighLight = false
            item.programName_link = `./#/wrapper/programListDetail?programName=${item.programName}&id=${item.id}&chanxian=${this.$route.query.chanxian}`;
            programList.push(item)
          })

          this.tableHeader = programHeader
          this.tableData = programList

//          this.page.currentPage = res.data.data.pageNum
          this.page.total = res.data.data.total
          this.page.pageSize = res.data.data.pageSize

        })
      },

      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.fetchData()
      },
    },
    components: {
      'table-component': table,
      'card-component': card,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


